<script lang="ts" setup>
import {onMounted, ref, watch} from "vue";
import {useRouter} from "vue-router";
import {QuestionControllerService, QuestionListVO} from "../../generated";

interface TableItem {
  id?: string;
  title?: string;
  rate?: string;
  tag?: {
    type: string;
    value: string;
  };
}

interface Filters {
  difficulty: string;
  status: number | '';
  tag: string[];
  questionSet: string;
  searchInput: string;
}

interface QueryParams {
  currentPage: number;
  pageSize: number;
  difficulty?: number;
  status?: number;
  tags?: string[];
  questionSet?: string;
  searchText?: string;
}

const props = defineProps<{
  filters: Filters
}>();

const tableData = ref<TableItem[]>([]);

const difficultyMap = {
  0: {type: "success", value: "简单"},
  1: {type: "warning", value: "中等"},
  2: {type: "danger", value: "困难"}
};

// 添加分页相关的状态
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)

// 添加一个反向映射对象
const difficultyReverseMap: Record<string, number> = {
  "easy": 0,
  "medium": 1,
  "hard": 2
};

onMounted(async () => {
  await loadQuestions()
});

const loadQuestions = async () => {
  // 构建查询参数
  const params: QueryParams = {
    currentPage: currentPage.value,
    pageSize: pageSize.value,
  }

  // 添加筛选条件
  if (props.filters.difficulty) {
    // 将文字难度转换为对应的数字
    params.difficulty = difficultyReverseMap[props.filters.difficulty];
  }
  if (props.filters.status !== '') {
    params.status = props.filters.status;
  }
  if (props.filters.tag && props.filters.tag.length > 0) {
    params.tags = props.filters.tag;
  }
  if (props.filters.questionSet) {
    params.questionSet = props.filters.questionSet;
  }
  if (props.filters.searchInput) {
    params.searchText = props.filters.searchInput;
  }

  const res = await QuestionControllerService.pageQuestionsUsingPost(params);
  tableData.value = (res.data.records as QuestionListVO[]).map((item: QuestionListVO) => ({
    id: item.id,
    title: item.title,
    rate: item.rate,
    tag: difficultyMap[item.difficulty as keyof typeof difficultyMap]
  }));
  total.value = res.data.total
}

// 添加分页变化处理方法
const handleCurrentChange = async (val: number) => {
  currentPage.value = val
  await loadQuestions()
}

const handleSizeChange = async (val: number) => {
  pageSize.value = val
  currentPage.value = 1
  await loadQuestions()
}

// 监听筛选条件变化
watch(() => props.filters, async (_newFilters) => {
  currentPage.value = 1; // 重置到第一页
  await loadQuestions();
}, {deep: true});

let router = useRouter();

const toQuestionDetail = (id: number) => {
  router.push("/question/detail/" + id)
}
</script>
<template>
  <el-table
      stripe
      :data="tableData"
      style="width: 100%"
  >
    <el-table-column prop="title" label="题目" align="center">
      <template #default="scope">
        <a class="row-title" @click="toQuestionDetail(scope.row.id)">{{ scope.row.title }}</a>
      </template>
    </el-table-column>
    <el-table-column prop="rate" label="通过率" align="center"/>
    <el-table-column prop="tag" label="难度" align="center">
      <template #default="scope">
        <el-tag
            :type="scope.row.tag.type"
            disable-transitions
        >{{ scope.row.tag.value }}
        </el-tag>
      </template>
    </el-table-column>
  </el-table>

  <!-- 修改分页容器 -->
  <div class="pagination-container">
    <div class="page-sizes">
      <el-select
          v-model="pageSize"
          @change="handleSizeChange"
      >
        <el-option
            v-for="size in [10, 50, 100]"
            :key="size"
            :value="size"
            :label="`${size}条/页`"
        />
      </el-select>
    </div>
    <div class="page-nav">
      <el-pagination
          v-model:current-page="currentPage"
          layout="prev, pager, next"
          :total="total"
          :page-size="pageSize"
          @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>
<style scoped>
.row-title:hover {
  color: #1890ff;
  cursor: pointer;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.page-sizes {
  flex-shrink: 0;
  width: 120px;
}

.page-nav {
  flex-shrink: 0;
}
</style>
